<template>
	<ul class="flex flex-wrap">
		<el-space wrap>
			<li v-for="(chi, k) in item.checked" :key="k">
				<p>{{ chi.name }}</p>
				<template v-if="item.value == 1">
					<el-date-picker
						@change="handleChange(item)"
						v-model="chi.value"
						type="daterange"
						value-format="YYYY-MM-DD"
						format="YYYY年MM月DD日"
						range-separator="-"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
					/>
				</template>
				<template v-if="item.value == 2">
					<remoteSelect
						@change="handleChange(item)"
						style="min-width: 160px"
						:code="chi.dictcode"
						:multiple="chi.compon == 'checkbox'"
						v-model="chi.value"
						filterKey="label"
						api="getDictItemList"
					></remoteSelect>
				</template>
				<div class="flex w-100 align-center" v-if="item.value == 3">
					<el-switch
						v-model="chi.flag"
						class="mr8"
						width="80"
						inline-prompt
						active-text="模糊匹配"
						inactive-text="精确匹配"
						@change="handleChange(item)"
					/>
					<el-input size="small" placeholder="请输入要匹配的关键字" v-model="chi.value" @change="handleChange(item)"> </el-input>
				</div>
				<template v-if="item.value == 4">
					<RangeValue v-model="chi.value" @change="handleChange(item)"></RangeValue>
				</template>
				<template v-if="item.value == 5">
					<el-radio-group v-model="chi.value" @change="handleChange(item)">
						<el-radio label="是" value="not null"></el-radio>
						<el-radio label="否" value="null"></el-radio>
					</el-radio-group>
				</template>
			</li>
		</el-space>
	</ul>
</template>

<script setup lang="ts">
import RangeValue from '@/views/aplid/RangeValue/index.vue'
import remoteSelect from '@/components/AplidCrud/src/AplidRemote/index'
type Props = {
	item: any
}
withDefaults(defineProps<Props>(), {})
const emit = defineEmits(['update:change'])
const handleChange = (item) => {
	emit('update:change', item)
}
</script>

<style scoped></style>
